Axios দিয়ে সহজভাবে API Requests করা

Axios একটি জনপ্রিয় JavaScript লাইব্রেরি যা HTTP রিকোয়েস্ট করতে ব্যবহৃত হয়। এটি promises সমর্থন করে এবং সহজে API রিকোয়েস্ট করার জন্য একটি পরিষ্কার এবং সহজ API প্রদান করে। Axios ওয়েব অ্যাপ্লিকেশন বা React, Vue, Angular ইত্যাদিতে HTTP রিকোয়েস্ট করার জন্য ব্যাপকভাবে ব্যবহৃত হয়।

নিচে Axios ব্যবহার করে API রিকোয়েস্ট করার কিছু সহজ পদ্ধতি আলোচনা করা হলো:

১. Axios ইনস্টলেশন

প্রথমে, আপনাকে Axios ইনস্টল করতে হবে। এটি NPM বা Yarn ব্যবহার করে ইনস্টল করা যায়:

NPM:

npm install axios

Yarn:

yarn add axios

২. GET রিকোয়েস্ট করা

GET রিকোয়েস্ট API থেকে ডেটা ফেচ করতে ব্যবহৃত হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Axios ব্যবহার করে API থেকে ডেটা ফেচ করা হচ্ছে।

import axios from 'axios';

const getData = async () => {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
    console.log(response.data); // API থেকে পাওয়া ডেটা
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

getData();

এখানে:

• axios.get() ফাংশনটি GET রিকোয়েস্ট পাঠাতে ব্যবহৃত হয়।
• await কিওয়ার্ড ব্যবহার করে আমরা প্রমিজ সম্পূর্ণ হওয়ার জন্য অপেক্ষা করছি।
• response.data তে API থেকে প্রাপ্ত ডেটা থাকবে।

৩. POST রিকোয়েস্ট করা

POST রিকোয়েস্ট ব্যবহার করা হয় নতুন ডেটা সার্ভারে পাঠানোর জন্য। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Axios ব্যবহার করে একটি POST রিকোয়েস্ট পাঠানো হচ্ছে:

import axios from 'axios';

const postData = async () => {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', {
      title: 'foo',
      body: 'bar',
      userId: 1
    });
    console.log(response.data); // সার্ভার থেকে প্রাপ্ত রেসপন্স
  } catch (error) {
    console.error('Error posting data:', error);
  }
};

postData();

এখানে:

• axios.post() ফাংশনটি POST রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়।
• দ্বিতীয় প্যারামিটার হিসেবে আমরা যেই ডেটা পাঠাতে চাই তা প্রদান করি (যেমন এখানে { title: 'foo', body: 'bar' })।

৪. PUT রিকোয়েস্ট করা

PUT রিকোয়েস্ট সাধারণত ডেটা আপডেট করতে ব্যবহৃত হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Axios ব্যবহার করে একটি PUT রিকোয়েস্ট করা হচ্ছে:

import axios from 'axios';

const updateData = async () => {
  try {
    const response = await axios.put('https://jsonplaceholder.typicode.com/posts/1', {
      title: 'Updated Title',
      body: 'Updated Body',
      userId: 1
    });
    console.log(response.data); // সার্ভার থেকে প্রাপ্ত রেসপন্স
  } catch (error) {
    console.error('Error updating data:', error);
  }
};

updateData();

এখানে:

• axios.put() ফাংশনটি PUT রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়।
• URL এ 1 ব্যবহার করা হয়েছে, যাতে প্রথম পোস্টটি আপডেট করা যায়।

৫. DELETE রিকোয়েস্ট করা

DELETE রিকোয়েস্ট API থেকে ডেটা মুছে ফেলতে ব্যবহৃত হয়। নিচে একটি উদাহরণ দেওয়া হলো যেখানে Axios ব্যবহার করে একটি DELETE রিকোয়েস্ট করা হচ্ছে:

import axios from 'axios';

const deleteData = async () => {
  try {
    const response = await axios.delete('https://jsonplaceholder.typicode.com/posts/1');
    console.log(response.data); // সার্ভার থেকে প্রাপ্ত রেসপন্স
  } catch (error) {
    console.error('Error deleting data:', error);
  }
};

deleteData();

এখানে:

• axios.delete() ফাংশনটি DELETE রিকোয়েস্ট পাঠানোর জন্য ব্যবহৃত হয়।
• URL এ 1 ব্যবহার করা হয়েছে, যাতে প্রথম পোস্টটি ডিলিট করা যায়।

৬. Axios Configuration

যখন আপনাকে একাধিক রিকোয়েস্টে একই কনফিগারেশন (যেমন বেস URL বা হেডার) ব্যবহার করতে হয়, তখন আপনি Axios এর কনফিগারেশন সেট করতে পারেন।

import axios from 'axios';

// Axios এর কনফিগারেশন সেট করা
const instance = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/',
  timeout: 1000, // 1 সেকেন্ডের জন্য অপেক্ষা
  headers: {'X-Custom-Header': 'foobar'}
});

const getData = async () => {
  try {
    const response = await instance.get('posts');
    console.log(response.data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

getData();

এখানে:

• axios.create() ফাংশন দিয়ে একটি কাস্টম Axios ইনস্ট্যান্স তৈরি করা হয়েছে যাতে বেস URL এবং হেডার সেট করা যায়।
• এরপর এই ইনস্ট্যান্স ব্যবহার করে রিকোয়েস্ট করা হয়েছে।

সারাংশ

Axios দিয়ে API রিকোয়েস্ট করা খুবই সহজ এবং এটি promises সমর্থন করে, যেটি অ্যাসিনক্রোনাস অপারেশনগুলোর জন্য কার্যকরী। আপনি সহজেই GET, POST, PUT, এবং DELETE রিকোয়েস্ট করতে পারেন এবং প্রতিটি রিকোয়েস্টের জন্য কাস্টম কনফিগারেশনও ব্যবহার করতে পারেন। Axios-এর মাধ্যমে API রিকোয়েস্ট করা React, Vue, অথবা যেকোনো JavaScript অ্যাপ্লিকেশনে খুবই সুবিধাজনক এবং কার্যকরী।